<template>
  <div class="under_div">
    <div class="service">
      <p>服务介绍</p>
      <div class="service_content">
        <p>承接查验、物业服务评估监理服务第三方机构：经营范围内容除物业服务评估外还需有特种的消防和电梯的相关业务范围，特种类：消防、电梯需持证上岗并提供社保证明。</p>
        <p>根据甲方要求对小区电梯、消防、给排水、共有部位、共有设施、绿化等进行查验，查验存在的问题，并出具书面报告一式三份；根据小区提供的资产清单来测算费用，并签订承接查验协议。（业委会成立后的承接查验、新物业交接承接查验、物业服务评估监理服务）  </p>
      </div>
    </div>
    <ul class="input_box">
      <li>
        <span>小区总面积(万平方)：</span>
        <input type="tel" v-model="area">
      </li>
      <li>
        <span>电梯数量：</span>
        <input type="tel" v-model="liftNum">
      </li>
      <li>
        <span>消监控室数量：</span>
        <input type="tel" v-model="monitor">
      </li>
    </ul>
    <div class="discount">
      <p>折扣价：{{discount}}元</p>
      <div class="discount_btn" @click="clickDiscount">
        <span>{{discountText}}</span>
        <img src="../home/images/drop_icon.png" alt="">
      </div>
    </div>
    <div class="cost">
      <span>总金额：{{total}}元/次</span>
      <span class="cost_detail" @click="goCost">费用明细</span>
    </div>
    <div class="post_btn">
      <button @click="postData" :class="{clickbtn:isDisable}" :disabled="isDisable">
        <span>{{btnTitle}}</span>
      </button>
    </div>
    <div class="explain">
      <h3>企业资质：</h3>
      <p>
        承接查验涉及电梯需有特种设备许可证,且查验技术人员持有电梯特种资格证书,并提供该查验人员的社保证明。
      </p>
      <p>涉及消防设施维护保养检测的消防技术服务机构,列入消防技术服务管理系统的目录库单位,应具有相关技术人员不得少于8人,其中一级注册消防工程师不少于2人,消防设施操作员国家职业资格证书不少于6人,其中中级技能等级的不少于2人。</p>
    </div>
    <!--折扣弹窗-->
    <mt-popup
      v-model="discountShow"
      position="bottom" :closeOnClickModal="orClose">
      <div class="count_list">
        <ul>
          <li v-for="(cost, index) in costData" :key="index" @click="choseCost(cost)">
            <span>{{cost.option}}</span>
          </li>
        </ul>
        <div class="close_btn" @click="closeCount">取消</div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import { checkOffer } from '../../api/my'
  import { Toast, Indicator } from 'mint-ui'

  export default {
    name: 'UnderTaking',
    data () {
      return {
        discountShow: false,
        orClose: false,
        page: 'under',
        area: '1', // 小区总面积
        liftNum: '1', // 电梯数量
        monitor: '1', // 监控数量
        total: '', // 总价
        costData: [],
        discountText: '', // 折扣标题
        discount: '', // 对应的折扣价格
        costDetail: [], // 对应明细
        isDisable: false, // 防止提交按钮重复提交(能点击)
        btnTitle: '查询',
        state: '' // 页面状态[判断是从哪个页面进来的]
      }
    },
    created () {
      this.state = this.$route.query.state
      // console.log(this.state)
      if (this.state === 1 || this.state === undefined) {
        this._getData()
      }
    },
    // 设置缓存从哪个页面返回
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'costDetail') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack) {
        this._getData()
      }
      this.$route.meta.isBack = false
    },
    methods: {
      // 数据请求
      _getData() {
        checkOffer(this.area, this.liftNum, this.monitor).then(res => {
          // console.log(res)
          if (res.code === 200) {
            // console.log(res.data.check)
            this.total = res.data.check_total_money // 总金额
            this.costData = res.data.check
            // console.log(this.costData)
            this.discountText = this.costData[0].option // 默认折扣标题
            this.discount = this.costData[0].total // 对应折扣价格
            this.costDetail = this.costData[0].details // 对应折扣明细
          }
        })
      },
      // 点击打开折扣弹窗
      clickDiscount() {
        this.discountShow = true
      },
      // 取消折扣弹窗
      closeCount () {
        this.discountShow = false
      },
      // 选择折扣
      choseCost (item) {
        // console.log(item)
        this.discountText = item.option // 折扣标题
        this.discount = item.total // 对应的折扣价格
        this.costDetail = item.details
        // console.log(this.costDetail)
        this.discountShow = false
      },
      // 提交
      postData () {
        this.isDisable = true
        if (!this.area || !this.liftNum || !this.monitor) {
          Toast({
            message: '请将信息填写完整！',
            position: 'middle',
            duration: 1500
          })
          this.isDisable = false
          return
        } else {
          Indicator.open({
            text: '查询中,请稍后',
            spinnerType: 'fading-circle'
          })
          checkOffer(this.area, this.liftNum, this.monitor).then(res => {
            // console.log(res)
            if (res.code === 200) {
              Indicator.close()
              this.total = res.data.check_total_money // 总金额
              this.costData = res.data.check
              this.discountText = this.costData[0].option // 折扣标题
              this.discount = this.costData[0].total // 对应折扣价格
              this.costDetail = this.costData[0].details // 对应折扣明细
            }
          })
          setTimeout(() => {
            this.isDisable = false
            this.btnTitle = '查询'
          }, 1000)
          this.isDisable = true
          this.btnTitle = '查询中'
        }
      },
      // 去到费用明细
      goCost() {
        this.$router.push({
          path: '/my/costDetail',
          query: {
            page: this.page,
            data: this.costDetail,
            money: this.discount
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.under_div{
  padding-top: 50px;
  /*padding-bottom: 50px;*/
  .service{
    padding: 15px;
    p{
      color: #707070;
      font-size: 15px;
    }
    .service_content{
      padding: 10px;
      margin-top: 10px;
      border-radius: 10px;
      background: rgba(38, 165, 255, 0.5);
      p{
        color: #ffffff;
        font-size: 14px;
        line-height: 20px;
      }
    }
  }
  .input_box{
    li{
      width: 100%;
      /*padding: 15px;*/
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      span{
        font-size: 15px;
        color: #414141;
        margin-left: 15px;
      }
      input{
        width: 160px;
        padding: 5px;
        margin-right: 15px;
        border: 1px solid #26a5ff;
        outline: none;
        border-radius: 5px;
        color: #414141;
      }
    }
  }
  .discount{
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    p{
      font-size: 16px;
      color: #ff9c39;
      font-weight: bolder;
      margin-left: 15px;
    }
    .discount_btn{
      padding: 5px 20px;
      background: #ff9c39;
      text-align: center;
      margin-right: 15px;
      border-radius: 15px;
      color: #ffffff;
      font-size: 15px;
    }
  }
  .cost{
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    color: #414141;
    margin-top: 15px;
    span{
      margin-left: 15px;
    }
    .cost_detail{
      color: #077bff;
      border-bottom:1px solid #077bff;
      margin: 5px 15px 5px 5px;
    }
  }
  .post_btn{
    text-align: right;
    margin-top: 10px;
    margin-right: 15px;
    button{
      padding: 10px 40px;
      font-size: 15px;
      color: #ffffff;
      background: #479DFF;
      display: inline-flex;
      align-items: center;
      span{
        margin-right: 10px;
      }
    }
    .clickbtn{
      padding: 10px 20px;
      font-size: 15px;
      color: #ffffff;
      background: #bcbcbc;
      display: inline-flex;
      align-items: center;
      span{
        margin-right: 10px;
      }
    }
  }
  .explain{
    margin-top: 20px;
    padding: 15px;
    h3{
      font-size: 14px;
      font-weight: normal;
      color: #BCBCBC;
    }
    p{
      font-size: 13px;
      color: #BCBCBC;
      margin-top: 10px;
      line-height: 20px;
    }
    p:last-child{
      margin-top: 0;
    }
  }
  .mint-popup-bottom{
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    .count_list{
      width: 100%;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      ul{
        border-bottom: 10px solid #f2f2f2;
        li{
          text-align: center;
          font-size: 17px;
          border-bottom: 1px solid #f2f2f2;
          height: 60px;
          span{
            line-height: 60px;
          }
        }
      }
      .close_btn{
        font-size: 17px;
        line-height: 60px;
        text-align: center;
      }
    }
  }
}
</style>
